<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-175993544-1"></script>
    <script>
        window.dataLayer = window.dataLayer || [];

        function gtag() {
            dataLayer.push(arguments);
        }

        gtag('js', new Date());

        gtag('config', 'UA-175993544-1');
    </script>

    <title>Incidents</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link href="https://fonts.googleapis.com/css?family=Quicksand:300,400,500,700,900" rel="stylesheet">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <link rel="stylesheet" href="fonts/icomoon/style.css">

    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/jquery-ui.css">
    <link rel="stylesheet" href="css/owl.carousel.min.css">
    <link rel="stylesheet" href="css/owl.theme.default.min.css">
    <link rel="stylesheet" href="css/owl.theme.default.min.css">

    <link rel="stylesheet" href="css/jquery.fancybox.min.css">

    <link rel="stylesheet" href="css/bootstrap-datepicker.css">

    <link rel="stylesheet" href="fonts/flaticon/font/flaticon.css">

    <link rel="stylesheet" href="css/aos.css">

    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/custom.css">

</head>

<body data-spy="scroll" data-target=".site-navbar-target" data-offset="300">

    <div class="site-wrap">

        <div class="site-mobile-menu site-navbar-target">
            <div class="site-mobile-menu-header">
                <div class="site-mobile-menu-close mt-3">
                    <span class="icon-close2 js-menu-toggle"></span>
                </div>
            </div>
            <div class="site-mobile-menu-body"></div>
        </div>

        <header class="site-navbar bg-white js-sticky-header site-navbar-target" role="banner" id="incidents_banner">

            <div class="container">
                <div class="row align-items-center">
                    <div class="col-12 col-md-10 d-none d-xl-block">
                        <nav class="site-navigation position-relative text-right" role="navigation">
                            <ul class="site-menu main-menu js-clone-nav mr-auto d-none d-lg-block">
                                <li><a href="#home-section" class="nav-link">Home</a></li>
                                <li><a href="#team-section" class="nav-link">Team</a></li>
                                <li><a href="#paper-and-code-section" class="nav-link">Paper & Code</a></li>
                                <li><a href="#dataset-section" class="nav-link">Dataset</a></li>
                                <li><a href="#experiments-section" class="nav-link">Experiments</a></li>
                                <li><a href="#demo-section" class="nav-link">Upload Demo</a></li>
                                <li><a href="/flickr" class="nav-link">Flickr Demo</a></li>
                            </ul>
                        </nav>
                    </div>


                    <div class="d-inline-block d-xl-none ml-md-0 mr-auto py-3" style="position: relative; top: 3px;"><a
                            href="#" class="site-menu-toggle js-menu-toggle text-black"><span
                                class="icon-menu h3"></span></a></div>

                </div>
            </div>

        </header>


        <div class="site-blocks-cover overlay" id="incidents_start" data-aos="fade" data-stellar-background-ratio="0.1">
            <div class="container">
                <div class="row align-items-center justify-content-center text-center">

                    <div class="col-md-12" data-aos="fade-up" data-aos-delay="400" style="padding-top: 5vh;">

                        <div class="row justify-content-center mb-4">
                            <div class="col-md-8 text-center">
                                <h1>Detecting natural disasters, damage, and incidents in the wild</h1><br>
                                <iframe class="youtube_video" id="eccv_one_minute_video"
                                    src="https://www.youtube.com/embed/XHYH37nz-oQ?cc_load_policy=1"></iframe>
                                <div class="click_icons">
                                    <ul class="list-inline">
                                        <li>
                                            <a href="IncidentsDatasetPaper.pdf" class="btn btn-primary">
                                                <i class="fa fa-fw fa-paper-plane"></i>Paper
                                            </a>
                                        </li>
                                        <li>
                                            <a href="https://github.com/ethanweber/IncidentsDataset"
                                                class="btn btn-primary">
                                                <i class="fa fa-fw fa-github"></i>Code and Data
                                            </a>
                                        </li>
                                        <li>
                                            <a href="https://youtu.be/gydVRX2guiY" class="btn btn-primary">
                                                <i class="fa fa-fw fa-file-movie-o"></i>ECCV Video (10 min)
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="site-section border-bottom" id="team-section">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-md-7 text-center">
                        <h2 class="text-black h1 site-section-heading">Team</h2>
                    </div>
                </div>
                <div class="row">
                    <div class="col" id="incidents_row" data-aos="fade" data-aos-delay="100">
                        <div class="person text-center">
                            <img src="images_people/ethan.jpeg" alt="Image" class="img-fluid rounded-circle w-50">
                            <h6><a href="https://ethanweber.me/">Ethan Weber</a></h6>
                            <p class="position text-muted">MIT</p>
                        </div>
                    </div>
                    <div class="col" id="incidents_row" data-aos="fade" data-aos-delay="200">
                        <div class="person text-center">
                            <img src="images_people/nuria.jpeg" alt="Image" class="img-fluid rounded-circle w-50">
                            <h6><a
                                    href="https://www.linkedin.com/in/nuria-marzo-grimalt-964679186/?originalSubdomain=es">Nuria
                                    Marzo</a></h6>
                            <p class="position text-muted">MIT</p>
                        </div>
                    </div>
                    <div class="col" id="incidents_row" data-aos="fade" data-aos-delay="300">
                        <div class="person text-center">
                            <img src="images_people/dim.png" alt="Image" class="img-fluid rounded-circle w-50">
                            <h6><a href="https://scholar.google.com/citations?user=-_JAhdQAAAAJ&hl=en">Dim
                                    Papadopoulos</a>
                            </h6>
                            <p class="position text-muted">MIT</p>
                        </div>
                    </div>
                    <div class="col" id="incidents_row" data-aos="fade" data-aos-delay="400">
                        <div class="person text-center">
                            <img src="images_people/aritro.jpeg" alt="Image" class="img-fluid rounded-circle w-50">
                            <h6><a href="https://scholar.google.com/citations?user=G8ycHhYAAAAJ&hl=en">Aritro Biswas</a>
                            </h6>
                            <p class="position text-muted">MIT</p>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col" id="incidents_row" data-aos="fade" data-aos-delay="100">
                        <div class="person text-center">
                            <img src="images_people/agata.jpeg" alt="Image" class="img-fluid rounded-circle w-50">
                            <h6><a href="https://scholar.google.com/citations?user=5smUr5IAAAAJ&hl=en">Agata
                                    Lapedriza</a>
                            </h6>
                            <p class="position text-muted">MIT</p>
                        </div>
                    </div>
                    <div class="col" id="incidents_row" data-aos="fade" data-aos-delay="200">
                        <div class="person text-center">
                            <img src="images_people/ferda.png" alt="Image" class="img-fluid rounded-circle w-50">
                            <h6><a href="https://scholar.google.com/citations?user=vgFqXEIAAAAJ&hl=en">Ferda Ofli</a>
                            </h6>
                            <p class="position text-muted">QCRI</p>
                        </div>
                    </div>
                    <div class="col" id="incidents_row" data-aos="fade" data-aos-delay="300">
                        <div class="person text-center">
                            <img src="images_people/imran.jpg" alt="Image" class="img-fluid rounded-circle w-50">
                            <h6><a href="https://scholar.google.com/citations?user=z8niHlEAAAAJ&hl=en">Muhammad
                                    Imran</a>
                            </h6>
                            <p class="position text-muted">QCRI</p>
                        </div>
                    </div>
                    <div class="col" id="incidents_row" data-aos="fade" data-aos-delay="400">
                        <div class="person text-center">
                            <img src="images_people/antonio.png" alt="Image" class="img-fluid rounded-circle w-50">
                            <h6><a href="https://scholar.google.com/citations?user=8cxDHS4AAAAJ&hl=en">Antonio
                                    Torralba</a>
                            </h6>
                            <p class="position text-muted">MIT</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <section class="site-section" id="paper-and-code-section">
        <div class="container">
            <div class="row">
                <div class="col-lg-6">
                    <div class="p-3 box-with-humber">
                        <h2 class="text-black h1 site-section-heading text-center">Paper & Code</h2>
                        <p class="mb-4">Responding to natural disasters, such as earthquakes, floods, and wildfires, is
                            a
                            laborious task performed by on-the-ground emergency responders and analysts. Social media
                            has
                            emerged as a low-latency data source to quickly understand disaster situations. While most
                            studies on social media are limited to text, images offer more information for understanding
                            disaster and incident scenes. However, no large-scale image datasets for incident detection
                            exists. In this work, we present the Incidents Dataset, which contains 446,684 images
                            annotated
                            by humans that cover 43 incidents across a variety of scenes. We employ a baseline
                            classification model that mitigates false-positive errors and we perform image filtering
                            experiments on millions of social media images from Flickr and Twitter. Through these
                            experiments, we show how the Incidents Dataset can be used to detect images with incidents
                            in
                            the wild.</p>
                    </div>
                </div>
                <div class="col-lg-6" style="margin-top: 5%;">
                    <img src="images/website_intro_figure.png" alt="Image" class="img-fluid"><br>
                    <span class="category"><span style="font-weight: bold;">Incidents detection map.</span> Here we
                        illustrate a map that could be created with our Incidents Model. By detecting and geo-locating
                        incidents in tweets, relevant maps can be created to help inform in response efforts.</span>
                </div>
            </div>

            <div class="row">
                <div class="col">
                    <div class="box-with-humber">
                        <p class="mb-4">Use the following links for access to the paper, code, and data.
                            The GitHub page contains code and final model weights, along with an explanation of how to
                            use
                            it. It also includes instructions for downloading the dataset.</p>
                        <ul>
                            <li><a href="IncidentsDatasetPaper.pdf">Paper</a></li>
                            <li><a href="https://github.com/ethanweber/IncidentsDataset">Code and Data</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="site-section" id="dataset-section">
        <div class="container">
            <div class="row mb-5 justify-content-center">
                <div class="col-lg-6 text-center">
                    <h2 class="text-black h1 site-section-heading text-center">Incidents Dataset</h2>
                    <p class="lead">The large-scale Incidents Dataset consists of 446,684 scene-centric
                        class-positive images (annotated by humans) related to natural disasters, types of damage or
                        specific events that can require human
                        attention or assistance, like traffic jams or car accidents. We use the term incidents to refer
                        to
                        the 43 categories covered by our dataset. 49 places are used to add diversity to the images.
                        An additional set of 697,464 class-negative images are part of the dataset and used to train our
                        final model to mitigate false-positive predictions. See the paper for more details.</p>
                    <ul class="list-unstyled">
                        <li><a href="https://github.com/ethanweber/IncidentsDataset#obtain-the-data">Download Incidents
                                Dataset</a></li>
                    </ul>
                </div>
                <div class="col-lg-6" style="margin-top: 5%;">
                    <img src="images/website_app_dataset_composition.png" alt="Image" class="img-fluid"><br>
                    <span class="category"><span style="font-weight: bold;">Incidents Dataset composition.</span> The
                        number of positive (blue) and negative (orange) labeled incident images is shown on the left and
                        the distribution of images for (incident, place) combinations is shown on the right. The dataset
                        contains incidents in many different scenes. White cells indicate the unlikley (incident, place)
                        combinations for which it is hard to find images (e.g., ``car accident in volcano'').</span>
                </div>
            </div>
            <p class="lead">Below we show some example images from the dataset:</p>
        </div>


        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-4">
                    <a href="images_dataset/airplane_accident_in_desert.jpg" class="media-1" data-fancybox="gallery">
                        <img src="images_dataset/airplane_accident_in_desert.jpg" alt="Image" class="img-fluid">
                        <div class="media-1-content">
                            <span class="category">airplane accident in desert</span>
                        </div>
                    </a>
                </div>
                <div class="col-lg-4">
                    <a href="images_dataset/earthquake_in_village.jpg" class="media-1" data-fancybox="gallery">
                        <img src="images_dataset/earthquake_in_village.jpg" alt="Image" class="img-fluid">
                        <div class="media-1-content">
                            <span class="category">earthquake in village</span>
                        </div>
                    </a>
                </div>
                <div class="col-lg-4">
                    <a href="images_dataset/ship_boat_accident_on_ocean.jpg" class="media-1" data-fancybox="gallery">
                        <img src="images_dataset/ship_boat_accident_on_ocean.jpg" alt="Image" class="img-fluid">
                        <div class="media-1-content">
                            <span class="category">ship boat accident on ocean</span>
                        </div>
                    </a>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-4">
                    <a href="images_dataset/snowslide_avalanche_in_snowfield.jpg" class="media-1"
                        data-fancybox="gallery">
                        <img src="images_dataset/snowslide_avalanche_in_snowfield.jpg" alt="Image" class="img-fluid">
                        <div class="media-1-content">
                            <span class="category">snowslide avalanche in snowfield</span>
                        </div>
                    </a>
                </div>
                <div class="col-lg-4">
                    <a href="images_dataset/on_fire_outdoor_building.jpg" class="media-1" data-fancybox="gallery">
                        <img src="images_dataset/on_fire_outdoor_building.jpg" alt="Image" class="img-fluid">
                        <div class="media-1-content">
                            <span class="category">on fire outdoor building</span>
                        </div>
                    </a>
                </div>
                <div class="col-lg-4">
                    <a href="images_dataset/car_accident_on_bridge.jpg" class="media-1" data-fancybox="gallery">
                        <img src="images_dataset/car_accident_on_bridge.jpg" alt="Image" class="img-fluid">
                        <div class="media-1-content">
                            <span class="category">car accident on brige</span>
                        </div>
                    </a>
                </div>
            </div>

            <div class="row">

                <div class="col-lg-4">
                    <a href="images_dataset/dust_devil_in_mountains.jpg" class="media-1" data-fancybox="gallery">
                        <img src="images_dataset/dust_devil_in_mountains.jpg" alt="Image" class="img-fluid">
                        <div class="media-1-content">
                            <span class="category">dust devil in mountains</span>
                        </div>
                    </a>
                </div>
                <div class="col-lg-4">
                    <a href="images_dataset/wildfire_in_forest.jpg" class="media-1" data-fancybox="gallery">
                        <img src="images_dataset/wildfire_in_forest.jpg" alt="Image" class="img-fluid">
                        <div class="media-1-content">
                            <span class="category">wildfire in forest</span>
                        </div>
                    </a>
                </div>
                <div class="col-lg-4">
                    <a href="images_dataset/flooded_parking_lot.jpg" class="media-1" data-fancybox="gallery">
                        <img src="images_dataset/flooded_parking_lot.jpg" alt="Image" class="img-fluid">
                        <div class="media-1-content">
                            <span class="category">flooded parking lot</span>
                        </div>
                    </a>
                </div>
            </div>
        </div>


    </section>

    <section class="site-section" id="experiments-section">
        <div class="container">
            <div class="row mb-5 justify-content-center">
                <div class="col text-center">
                    <h2 class="text-black h1 site-section-heading text-center">Experiments</h2>
                    <p class="lead">We examine how our incident detection model, trained with class-negative loss,
                        performs
                        in different real-world scenarios using millions of images collected from two popular social
                        media
                        platforms: Twitter and Flickr.</p>
                </div>
            </div>
            <div class="row mb-5 justify-content-center">
                <div class="col text-center">
                    <img src="images/website_app_without_negative_loss.png" alt="Image" class="img-fluid"><br>
                    <span class="category"><span style="font-weight: bold;">Using the class-negative loss.</span> (Top)
                        Top confidence images for "airplane accident", "on fire", and "bicycle accident" categories when
                        training without (left) and with (right) the class-negative loss. (Bottom) We report incident AP
                        increments achieved by our model over the baseline model.</span>
                </div>
            </div>
            <div class="row mb-5 justify-content-center">
                <div class="col text-center">
                    <img src="images/website_app_temporal_earthquake.png" alt="Image" class="img-fluid"><br>
                    <span class="category"><span style="font-weight: bold;">Finding peaks in earthquake tweets.</span>
                        (Top) Histogram of tweets obtained from Twitter using natural disaster keywords from 2017-2018.
                        Black lines indicate periods of time when our data collection server was inactive. (Bottom)
                        Number of tweets with earthquake images per day after filtering with at least 50% confidence.
                        For significant earthquakes (above 6.5 magnitude), we notice an increase in earthquake images
                        immediately after the event. Furthermore, we notice a spike on July 20, 2018 not reported in the
                        NOAA database. We manually checked the tweets and found images referring to a severe flood in
                        Japan, indicating that the flood damage may resemble to earthquake damage.</span>
                </div>
            </div>
            <div class="row mb-5 justify-content-center">
                <div class="col text-center">
                    <iframe class="img-fluid youtube_video" id="flickr_demo"
                        src="https://www.youtube.com/embed/I3p2wvwzQV8?cc_load_policy=1"></iframe>
                    <span class="category"><span style="font-weight: bold;">Filtering Flickr images.</span>
                        We show an interface where we filter Flickr images with 95% confidence and show them plotted on
                        the map.
                        More concretely, 41,667,045 geo-located images are filtered to only 26,123 high confidence
                        incident images.
                        You can try the inferface <a href="/flickr">here</a>.
                    </span>
                </div>
            </div>
            <div class="row mb-5 justify-content-center">
                <div class="col text-center">
                    <iframe class="img-fluid youtube_video" id="youtube_demo"
                        src="https://www.youtube.com/embed/xvw8X0H3XDA?cc_load_policy=1"></iframe>
                    <span class="category"><span style="font-weight: bold;">Filtering YouTube videos.</span> We show a
                        video where we filter YouTube videos and show the most confident incident prediction.</span>
                </div>
            </div>
        </div>
    </section>

    <section class="site-section" id="demo-section">
        <div class="container">
            <div class="row mb-5 justify-content-center">
                <div class="col-md-8 text-center">
                    <h2 class="text-black h1 site-section-heading text-center">Demo</h2>
                    <p class="lead">Upload an image to see the incident and place prediction!</p>
                    <input class="form-control" type="file" accept="image/*" name="image" id="file">
                    <button class="form-control" onclick="myFunction()" style="margin-top: 5px">Get Prediction</button>
                    <div id="loaderspinner" class="loader" style="display: none;"></div>
                    <div id="inference_result" style="display: none;">
                        <img src="" alt="Image" id="uploadedImage" class="img-fluid" style="margin-top: 5px;"><br>
                        <ol>
                            <span class="category"><span style="font-weight: bold;">Incidents: </span></span><br>
                            <li id="incident1"></li>
                            <li id="incident2"></li>
                            <li id="incident3"></li>
                            <li id="incident4"></li>
                            <li id="incident5"></li>
                        </ol>
                        <ol>
                            <span class="category"><span style="font-weight: bold;">Places: </span></span>
                            <li id="place1"></li>
                            <li id="place2"></li>
                            <li id="place3"></li>
                            <li id="place4"></li>
                            <li id="place5"></li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>
    </section>


    <script>

        // https://stackoverflow.com/questions/17710147/image-convert-to-base64/17711190
        function getBaseUrl() {
            var file = document.querySelector('input[type=file]')['files'][0];
            var reader = new FileReader();
            var baseString;
            reader.onloadend = function () {
                baseString = reader.result;


                document.getElementById("uploadedImage").src = baseString;

                var n = baseString.indexOf(",") + 1;
                var importantpart = baseString.substring(n, baseString.length);

                const Http = new XMLHttpRequest();
                // https://cors-anywhere.herokuapp.com/
                const url = 'https://pacific-gorge-51966.herokuapp.com/http://visiongpu08.csail.mit.edu:8012/prediction';
                Http.open("POST", url, true);
                Http.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
                Http.send("base64=" + importantpart);

                Http.onreadystatechange = (e) => {
                    $('#loaderspinner').css('display', 'none');
                    $('#inference_result').css('display', 'block');
                    var myArr = JSON.parse(Http.responseText);
                    $('#incident1').html(myArr["incidents"][0][0] + ": " + myArr["incidents"][0][1].toString());
                    $('#incident2').html(myArr["incidents"][1][0] + ": " + myArr["incidents"][1][1].toString());
                    $('#incident3').html(myArr["incidents"][2][0] + ": " + myArr["incidents"][2][1].toString());
                    $('#incident4').html(myArr["incidents"][3][0] + ": " + myArr["incidents"][3][1].toString());
                    $('#incident5').html(myArr["incidents"][4][0] + ": " + myArr["incidents"][4][1].toString());

                    $('#place1').html(myArr["places"][0][0] + ": " + myArr["places"][0][1].toString());
                    $('#place2').html(myArr["places"][1][0] + ": " + myArr["places"][1][1].toString());
                    $('#place3').html(myArr["places"][2][0] + ": " + myArr["places"][2][1].toString());
                    $('#place4').html(myArr["places"][3][0] + ": " + myArr["places"][3][1].toString());
                    $('#place5').html(myArr["places"][4][0] + ": " + myArr["places"][4][1].toString());
                }

                // do something with it...
                // send to flask server to get response


            };
            reader.readAsDataURL(file);
        }

        function myFunction() {
            $('#loaderspinner').css('display', 'block');
            $('#inference_result').css('display', 'none');
            var inputVal = document.getElementById("file").value;
            if (inputVal == "") {
                // pass because no image loaded
            } else {
                getBaseUrl()
            }
        }
    </script>

    <footer class="site-footer">
        <div class="container">
            <div class="row text-center">
                <div class="col-md-12">
                    <p style="margin-bottom: 0px;">
                        <!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
                        &copy; Massachusetts Institute of Technology 2020 |
                        <a href="https://colorlib.com" target="_blank">Colorlib</a>
                        template | <a href="https://accessibility.mit.edu/">Accessibility</a>
                </div>
            </div>
        </div>
    </footer>

    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/jquery-migrate-3.0.1.min.js"></script>
    <script src="js/jquery-ui.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/owl.carousel.min.js"></script>
    <script src="js/jquery.stellar.min.js"></script>
    <script src="js/jquery.countdown.min.js"></script>
    <script src="js/bootstrap-datepicker.min.js"></script>
    <script src="js/jquery.easing.1.3.js"></script>
    <script src="js/aos.js"></script>
    <script src="js/jquery.fancybox.min.js"></script>
    <script src="js/jquery.sticky.js"></script>

    <script src="js/main.js"></script>

</body>

</html>